<template>
<<<<<<< HEAD
  <div class="app-container">
    <div class="total-layout">
      <div style="display: inline-block;">
        <div>
          <el-row :gutter="0">
            <el-col :span="6" class="el-col_sold">
              <div class="bg-purple">后台项目</div>
              <div class="bg-purple-white"><a href="#">mall</a></div>
            </el-col>
            <el-col :span="6" class="el-col_sold">
              <div class="bg-purple">前端项目</div>
              <div class="bg-purple-white"><a href="#">mall-admin-web</a></div>
            </el-col>
            <el-col :span="6" class="el-col_sold">
              <div class="bg-purple">学习教程</div>
              <div class="bg-purple-white"><a href="#">mall-learning</a></div>
            </el-col>
          </el-row>
        </div>

        <div>
          <el-row :gutter="0">
            <el-col :span="6" class="width">
              <div class="total-frame">
                <img :src="img_order" class="total-icon">
                <div class="total-title">今日订单总数</div>
                <div class="total-value">200</div>
              </div>
            </el-col>
            <el-col :span="6" class="width">
              <div class="total-frame">
                <img :src="img_today_amount" class="total-icon">
                <div class="total-title">今日销售总额</div>
                <div class="total-value">￥5000.00</div>
              </div>
            </el-col>
            <el-col :span="6" class="width">
              <div class="total-frame">
                <img :src="img_yesterday_amount" class="total-icon">
                <div class="total-title">昨日销售总额</div>
                <div class="total-value">￥5000.00</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


      <div class="div_img">
        <img :src="img_erweima" class="total-icon-erweima">
      </div>
    </div>



    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待确认收货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">新缺货登记</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退款申请</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已发货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退货订单</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">广告位即将到期</span>
              <span style="float: right" class="color-danger">(10)</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">400</el-col>
                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">200</el-col>
                <el-col :span="6" class="color-danger overview-item-value">1000</el-col>
                <el-col :span="6" class="color-danger overview-item-value">5000</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">本月订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
              <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
              <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本月销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
              <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
              <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker style="float: right;z-index: 1" size="small" v-model="orderCountDate" type="daterange"
              align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              @change="handleDateChange" :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line :data="chartData" :legend-visible="false" :loading="loading" :data-empty="dataEmpty"
                :settings="chartSettings"></ve-line>
            </div>
          </div>
            <lineMarker class="lineMarker"  width="880px" height="450px"></LineMarker>
        </el-col>
      </el-row>
    </div>
=======
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
>>>>>>> 37a3803b6eced553603c19707d9ffd327d790750
  </div>
</template>

<script>
<<<<<<< HEAD
  import lineMarker from '@/components/Charts/LineMarker.vue';
  import img_order from '@/assets/images/order.png';
  import img_today_amount from '@/assets/images/today_amount.png';
  import img_yesterday_amount from '@/assets/images/yesterday_amount.png';
  import img_erweima from '@/assets/images/erweima.png';
  const DATA_FROM_BACKEND = {
    columns: ['date', 'orderCount', 'orderAmount'],
    rows: [{
        date: '2018-11-01',
        orderCount: 10,
        orderAmount: 1093
      },
      {
        date: '2018-11-02',
        orderCount: 20,
        orderAmount: 2230
      },
      {
        date: '2018-11-03',
        orderCount: 33,
        orderAmount: 3623
      },
      {
        date: '2018-11-04',
        orderCount: 50,
        orderAmount: 6423
      },
      {
        date: '2018-11-05',
        orderCount: 80,
        orderAmount: 8492
      },
      {
        date: '2018-11-06',
        orderCount: 60,
        orderAmount: 6293
      },
      {
        date: '2018-11-07',
        orderCount: 20,
        orderAmount: 2293
      },
      {
        date: '2018-11-08',
        orderCount: 60,
        orderAmount: 6293
      },
      {
        date: '2018-11-09',
        orderCount: 50,
        orderAmount: 5293
      },
      {
        date: '2018-11-10',
        orderCount: 30,
        orderAmount: 3293
      },
      {
        date: '2018-11-11',
        orderCount: 20,
        orderAmount: 2293
      },
      {
        date: '2018-11-12',
        orderCount: 80,
        orderAmount: 8293
      },
      {
        date: '2018-11-13',
        orderCount: 100,
        orderAmount: 10293
      },
      {
        date: '2018-11-14',
        orderCount: 10,
        orderAmount: 1293
      },
      {
        date: '2018-11-15',
        orderCount: 40,
        orderAmount: 4293
      }
    ]
  };
  export default {
    name: 'dashboard',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一月',
            onClick(picker) {
              const end = new Date();
              let start = new Date();
              start.setFullYear(2018);
              start.setMonth(10);
              start.setDate(1);
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        orderCountDate: '',
        chartSettings: {
          xAxisType: 'time',
          area: true,
          axisSite: {
            right: ['orderAmount']
          },
          labelMap: {
            'orderCount': '订单数量',
            'orderAmount': '订单金额'
          }
        },
        chartData: {
          columns: [],
          rows: []
        },
        loading: false,
        dataEmpty: false,
        img_order,
        img_today_amount,
        img_yesterday_amount,
        img_erweima
      }
    },
    created() {
      this.initOrderCountDate();
      this.getData();
    },
    methods: {
      handleDateChange() {
        this.getData();
      },
      initOrderCountDate() {
        let start = new Date();
        start.setFullYear(2018);
        start.setMonth(10);
        start.setDate(1);
        const end = new Date();
        end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
        this.orderCountDate = [start, end];
      },
      getData() {
        setTimeout(() => {
          this.chartData = {
            columns: ['date', 'orderCount', 'orderAmount'],
            rows: []
          };
          for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
            let item = DATA_FROM_BACKEND.rows[i];
            let currDate = str2Date(item.date);
            let start = this.orderCountDate[0];
            let end = this.orderCountDate[1];
            if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
              this.chartData.rows.push(item);
            }
          }
          this.dataEmpty = false;
          this.loading = false
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .el-col_sold {
    width: 348px;
    border: 1px solid #DCDFE6;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    height: 120px;
  }

  .bg-purple {
    font-family: "微软雅黑";
    color: #606266;
    font-size: 16px;
    height: 60px;
    padding: 30px;
    background: #f2f6fc;
  }

  .bg-purple-white {
    color: #6b9eff;
    font-size: 30px;
    height: 60px;
    padding-top: 10px;
    padding-left: 30px;
  }

  .width {
    margin-right: 60px;
  }

  .div_img {
    float: right;
    margin-top: 20px;
    margin-right: 15px;
    width: 160px;
    height: 160px;
    border: 2px solid #1F2D3D;
  }

  .total-icon-erweima {
    width: 160px;
    height: 160px;
  }

  .app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    width: 350px;
    padding: 20px;
    height: 100px;

  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .color-danger {
    color: #f50000;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
  }

  .address-content {
    padding: 20px;
    font-size: 18px
  }
=======
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
>>>>>>> 37a3803b6eced553603c19707d9ffd327d790750
</style>
